<template>
<div>
    <Modal title="选择商品" v-model="value" @on-cancel="cancel" :mask-closable="false" >
        <p>
            <span>产品库: </span>
            <commodity-ware-select :model="searchModel" w7 mgr2></commodity-ware-select>
            <span>分类: </span>
            <commodity-class-select v-model="searchModel.classes" w7></commodity-class-select>
        </p>
        <p mgt1>
            <Select v-model="searchModel.searchTarget" size="small" w6>
                <Option value="id">商品ID</Option>
                <Option value="name">商品名称</Option>
                <Option value="tag">商品标签</Option>
            </Select>
            <Input v-model="searchModel.search" size="small" w7 mgr2 />
            <Button size="small" @click="getpage">查询</Button>
        </p>	
        
        <AutoTable ref="auto-table" action="/api/services/app/Commodity/Search" :columns="columns" mgt1></AutoTable>
	
        <div slot="footer">
            <Button @click="cancel">取消</Button>
            <Button @click="save" type="primary">添加</Button>
        </div>
    </Modal>	
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase';
import AutoTable from "@common/components/AutoTable.vue";
import CommodityWareSelect from '../../components/common/commodity-ware-select.vue'
import CommodityClassSelect from '../../components/common/commodity-class-select.vue'

@Component({
	components:{AutoTable, CommodityWareSelect, CommodityClassSelect }
})
export default class CommoditySelect extends AbpBase {
    @Prop({type:Boolean,default:false}) value:boolean
    searchModel:any = {
        commodityWareId: 0,
        classes: [],
        search: '',
        searchTarget: ''
    }
	get columns() {
		return [
			{
				type: 'selection', width: 50, align: 'center'
			},
			{
				title: '图片', align: 'center', render: (h, params) => {
					return h('div', { 
                        attrs: { 'bg-cover': true },
                        style: { 'background-image': `url(${params.row.picture})`, width: "100%", height: "50px" }
                    }, "");
				}
			},
			{
				title: '分类', align: 'center', render: (h, params) => {
					return h('div', params.row.classes.toString());
				}
			},
			{
				title: '商品名称', align: 'center', key: 'name'
			}
		]
	}
	create(){
	}
	getpage() {
        var page = (this.$refs["auto-table"] as any).thePage;
        page.action_data = this.searchModel;
        page.getData();
	}
    save(){
		var selection = (this.$refs["auto-table"] as any).table.getSelection();
		if(selection.length == 0) {
			this.confirm('未选中任何商品', () => {});
			return;
        }
        
        this.$emit('save-success', selection);
        this.closeModal();
    }
    cancel(){
        this.closeModal();
    }
    closeModal() {
        this.$emit('input', false);
    }
}
</script>